<div ng-switch="datepickerMode">
	<p>{{datepickerMode}}</p>
	<div uib-daypicker template-url="waf/view/template/calendar/day.html" ng-switch-when="day" tabindex="0" class="uib-daypicker"
	 style="min-width: 230px"></div>
	<div uib-monthpicker ng-switch-when="month" tabindex="0" class="uib-monthpicker"></div>
	<div uib-yearpicker ng-switch-when="year" tabindex="0" class="uib-yearpicker"></div>
</div>

<script type="text/ng-template" id="waf/view/template/calendar/day.html">
<table role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
	<thead>
		<tr>
			<th colspan="7" style="text-align: center;"><strong>{{title}}</strong></th>
		</tr>
		<tr>
			<th ng-repeat="label in ::labels track by $index" class="text-center"><small aria-label="{{::label.full}}">{{::label.abbr}}</small></th>
		</tr>
	</thead>
	<tbody>
		<tr class="uib-weeks" ng-repeat="row in rows track by $index" role="row">
			<td ng-repeat="dt in row" class="uib-day text-center" role="gridcell" id="{{::dt.uid}}">
				<span ng-switch="activeDt.date.getMonth() == dt.date.getMonth()">
					<button ng-class="datepickerOptions.customClass(dt)" ng-switch-when="true" type="button" class="btn btn-default btn-sm" 
						ng-click="::datepickerOptions.toggleHoliday(dt)" onclick="this.blur();" ng-disabled="::datepickerOptions.readonly" tabindex="-1">
						{{::dt.label}}
					</button>
					<button ng-switch-when="false" type="button" class="btn btn-default btn-sm disabled" tabindex="-1">
						&nbsp;
					</button>
				</span>
			</td>
		</tr>
	</tbody>
</table>
</script>